﻿@page "/docs/extensions/datagrid/features"

<Seo Canonical="/docs/extensions/datagrid/binding-data" Title="Blazorise DataGrid features" Description="Learn how to use Blazorise DataGrid features." />

<DocsPageTitle>
    DataGrid: Features
</DocsPageTitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Paging">
        Paging is handled automatically by the <Code>DataGrid</Code>. You also have some additional attributes to configure paging based on your requirements.
        <UnorderedList>
            <UnorderedListItem><Code>ShowPager</Code> to hide or show pagination controls</UnorderedListItem>
            <UnorderedListItem><Code>PageSize</Code> the maximum number of items for each page.</UnorderedListItem>
            <UnorderedListItem><Code>CurrentPage</Code> current page number.</UnorderedListItem>
            <UnorderedListItem><Code>PreviousPageButtonTemplate</Code> template for previous page button</UnorderedListItem>
            <UnorderedListItem><Code>NextPageButtonTemplate</Code> template for next page button</UnorderedListItem>
            <UnorderedListItem><Code>FirstPageButtonTemplate</Code> template for first page button</UnorderedListItem>
            <UnorderedListItem><Code>LastPageButtonTemplate</Code> template for last page button</UnorderedListItem>
            <UnorderedListItem><Code>PageButtonTemplate</Code> template for explicated page button with <Code>PageButtonContext</Code> as parameter</UnorderedListItem>
        </UnorderedList>
    </DocsPageSectionHeader>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Sorting">
        <Paragraph>All columns can be sorted automatically if the option <Code>Sortable</Code> is enabled on the column.</Paragraph>
        <Paragraph>Use <Code>SortField</Code> if you would like to set a different field or property to be considered by the sorting mechanism on a certain column.</Paragraph>
    </DocsPageSectionHeader>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Editing">
        <Paragraph>The grid can perform some basic CRUD operations on the supplied <Code>Data</Code> collection. To enable editing on data-grid just set the <Code>Editable</Code> attribute to true.</Paragraph>

        <Paragraph>By default every time the <Code>Item</Code> is saved it will be automatically handled by the data-grid itself. That means that all its fields will be populated after the user clicks on Save button. If you want to change that, you can just disable it by setting the <Code>UseInternalEditing</Code> to false.</Paragraph>
        <Paragraph>The grid can work in two different editing modes that can provide different user experiences.</Paragraph>
        <Code>EditMode</Code>:
        <UnorderedList>
            <UnorderedListItem><Code>Form</Code> editing is done in the internal DataGrid form</UnorderedListItem>
            <UnorderedListItem><Code>Inline</Code> editing is done in the current row</UnorderedListItem>
            <UnorderedListItem><Code>Popup</Code> editing is done in the the modal dialog</UnorderedListItem>
        </UnorderedList>
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridEditModeExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridEditModeExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="NewItemDefaultSetter">
        <Code>NewItemDefaultSetter</Code> function is used to set default values when new item is created and before the edit form is shown. It will only be evaluate, if <Code>DataGrid</Code> is editable.
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridNewItemDefaultSetterExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridNewItemDefaultSetterExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Cascading values">
        <Paragraph>In some case you want to update a different cell in a DataGrid when you update a value. This can be achieved with an <Code>UpdateCell</Code> method. You have two ways of updating a cell:</Paragraph>
        <UnorderedList>
            <UnorderedListItem>by calling <Code>UpdateCell</Code> on the context inside of <Code>EditTemplate</Code>, or</UnorderedListItem>
            <UnorderedListItem>by calling <Code>UpdateCellEditValue</Code> on the <Code>DataGrid</Code> instance</UnorderedListItem>
        </UnorderedList>
        <Paragraph>In the following example we’re simply calling <Code>context.UpdateCell</Code> with a field-name to change and a new value that we want it to assign:</Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridUpdateCellExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridUpdateCellExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Filtering">
        <Paragraph>Use an attribute <Code>Filterable</Code> to enable or disable automatic filtering in grid component.</Paragraph>
        <Paragraph>Default method for filtering is <Code>Contains</Code>. If you want to change it you can set the <Code>FilterMethod</Code> attribute on data grid. Supported methods are:</Paragraph>
        <UnorderedList>
            <UnorderedListItem><Code>Contains</Code> search for any occurrence (default)</UnorderedListItem>
            <UnorderedListItem><Code>StartsWith</Code> search only the beginning</UnorderedListItem>
            <UnorderedListItem><Code>EndsWith</Code> search only the ending</UnorderedListItem>
            <UnorderedListItem><Code>Equals</Code> search must match the entire value</UnorderedListItem>
            <UnorderedListItem><Code>NotEquals</Code> opposite of Equals</UnorderedListItem>
        </UnorderedList>
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridFilterExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridFilterExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Custom Filtering">
        Regular filter works on per field basis. To enable advanced search capabilities you can use an attribute <Code>CustomFilter</Code>.
        Filter API is fairly straightforward. All you need is to attach <Code>CustomFilter</Code> to a function and bind search value to <Code>TextEdit</Code> field. DataGrid will automatically respond to entered value.
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridCustomFilteringExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridCustomFilteringExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Custom Column Filtering">
        Similar to the DataGrid custom filtering it is also possible to use custom filtering on per-column basis.
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridCustomColumnFilteringExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridCustomColumnFilteringExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Resizable" />
    <DocsPageSectionContent>
        <DataGridResizableExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridResizableExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Fixed Header" />
    <DocsPageSectionContent>
        <DataGridFixedHeaderExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridFixedHeaderExample" />
</DocsPageSection>


<DocsPageSection>
    <DocsPageSectionHeader Title="Scroll To">
        Scroll to API is available when the <Code>DataGrid</Code> <Code>FixedHeader</Code> or <Code>Virtualize</Code> is set.
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridScrollToExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridScrollToExample" />
</DocsPageSection>



